<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: { type: Array, default: () => [] }, // ['2025-09-01 00:00:00','2025-09-24 23:59:59']
  placeholder: { type: Array, default: () => ['开始时间', '结束时间'] },
  clearable: { type: Boolean, default: true },
  disabledDate: { type: Function, default: null },
  styleWidth: { type: String, default: '360px' },
  shortcuts: {
    type: Array,
    default: () => [
      {
        text: '今天',
        value: () => {
          const d = new Date()
          const s = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0)
          const e = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 23, 59, 59)
          return [s, e]
        }
      },
      {
        text: '近24小时',
        value: () => [new Date(Date.now() - 24*3600*1000), new Date()]
      },
      {
        text: '近7天',
        value: () => [new Date(Date.now() - 7*24*3600*1000), new Date()]
      }
    ]
  }
})

const emits = defineEmits(['update:modelValue', 'change'])

const innerValue = computed({
  get() {
    return props.modelValue?.length === 2 ? props.modelValue : []
  },
  set(val) {
    emits('update:modelValue', val || [])
    emits('change', val || [])
  }
})

function onChange(val) {
  emits('update:modelValue', val || [])
  emits('change', val || [])
}
</script>

<template>
  <el-date-picker
    v-model="innerValue"
    type="datetimerange"
    unlink-panels
    range-separator="至"
    :start-placeholder="placeholder[0]"
    :end-placeholder="placeholder[1]"
    :clearable="clearable"
    :disabled-date="disabledDate"
    :shortcuts="shortcuts"
    value-format="YYYY-MM-DD HH:mm:ss"
    format="YYYY-MM-DD HH:mm:ss"
    :style="{ width: styleWidth }"
    @change="onChange"
  />
</template>
